<script setup>
import { ref,defineEmits } from 'vue'
import api from "@/api/index.js";
const fileUrl = import.meta.env.VITE_FILE_URL

const message = ref('')

const fileList = ref([
]);
const emit = defineEmits(['handelSupplement','handleFiles'])
function handelSupplement(){

  emit('handelSupplement',message.value)


}

function  handleFiles(){
  emit('handleFiles',fileList.value)
  return true
}
const upload = async (file) => {
  file.status = 'uploading';
  file.message = '上传中...';
  let formData = new FormData();
  formData.append("file", file.file);
  let { code, data } = await api.getFileUpload(formData);
  if (code == 200) {
    for (let i = 0; i < fileList.value.length; i++) {
      if (fileList.value[i].objectUrl === file.objectUrl) {
        fileList.value[i].id = data
        break
      }
    }
    file.status = 'done';
    file.message = '上传成功';

  }else{
    file.status = 'failed';
    file.message = '上传失败';
  }
  handleFiles()
  // console.log('fileList',JSON.stringify(fileList.value))
  // console.log('file',JSON.stringify(file))

};
</script>

<template>
  <div class="header">补充描述和凭证</div>
  <div class="card">
    <van-cell-group inset>
      <van-field
        v-model="message"
        rows="1"
        type="textarea"
        placeholder="补充描述，有助于商家更好的解决问题哦"
        :autosize="{minHeight: 80}"
        @blur="handelSupplement"
      />
    </van-cell-group>
    <van-cell-group inset style="padding-top: 10px">
      <van-uploader v-model="fileList" multiple
                    :after-read="upload"
                   @delete="handleFiles"

      />

    </van-cell-group>
    <!-- <van-uploader class="uploader" v-model="fileList" multiple>
      <div class="uploader_button">
        <img src="@/assets/images/icons/upload.png" alt="">
        <span>添加照片</span>
      </div>
    </van-uploader> -->
  </div>
</template>

<style scoped lang="scss">
:deep(.van-cell) {
  padding: 1rem;
  background: rgba(79,172,145,0.05);
}
:deep(.van-cell-group--inset) {
  margin: 0;
  border-radius: .5rem;
}
.header{
  font-size: 1.4rem;
  color: #333333;
  font-weight: bold;
  margin-bottom: 1rem;
}
.card{
  background: #FFFFFC;
  box-shadow: 0 1.2rem 2rem 0 rgba(2,95,38,0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  .uploader{
    margin-top: 1.5rem;
    .uploader_button{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(79,172,145,0.05);
      height: 8rem;
      width: 8rem;
      border-radius: .5rem;
      span{
        margin-top: .5rem;
        font-size: 1.2rem;
        color: var(--van-primary-color);
      }
    }
  }
}
</style>